<template>
	<view class="main">
		<view :style="'padding-top:'+(demo.height+demo.top+10)+'px'">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="index_line" style="height: 20rpx;"></view>
		<view class="realMain">
			<!-- 搜索 -->
			<view class="realSearch dis_flex">
				<input type="text" value="" v-model="dataMain.text" placeholder="搜索内容" />
				<view class="realSearchBth dis_center" @click="NewsList(dataMain)">
					搜索
				</view>
			</view>
			<view class="actileJz">
				<view class="List">
					<view class="actileJzList" v-for="(item,index) in newLabel" :key="index">
						<text @click="SearchNewsList(item,index)"
							:class="arcConTxt==index?'arcConTxtClass':''">{{item}}</text>
					</view>
				</view>
				<view class="actile_main" @click="actileMainDetail(item.messageId)" v-for="(item,index) in dataList"
					:key="index">
					<view class="actile_main_left">
						<view class="actile_main_title">
							{{item.title}}
						</view>
						<view class="actile_main_bot">
							<text style="margin-top: 5rpx;">{{item.createTime}}</text>
							<!-- <image src="../../static/icon/yanjing.png" mode=""></image>
							<text>{{item.rows}}</text> -->
						</view>
					</view>
					<view class="actile_main_right" v-if="item.banner!=''">
						<image :src="webImgUrl+item.banner" mode=""></image>
					</view>
				</view>
				<view v-if="dataList.length==0"
					style="height: 200rpx;line-height: 200rpx;text-align: center;color: #999999;">{{meishuju}}</view>
			</view>
		</view>
		<view class="moreShuju" @click="moreClick(dataMain)" v-if="actives==false &&  dataList.length!=0">
			<text>{{newClickTitle}}</text>
		</view>
		<!-- //loading加载提示处 -->
		<!-- 	<view v-show="isLoadMore">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view> -->
	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	import search from '../../components/search.vue'
	export default {
		components: {
			head1,
			search
		},
		data() {
			return {
				title: '资讯',
				meishuju: '',
				demo: {
					top: '',
					height: ''
				},
				newClickTitle: '点击加载更多数据',
				actives: false,
				pageCount: '', //总页数
				webImgUrl: '',
				arcConTxt: '',
				dataMain: {
					currentPage: '1',
					pageSize: '10',
					column: "f72655cb-4cfd-11ec-9573-5254003b9aa7",
					label: '',
					text: ''
				},
				dataMain2: {
					currentPage: '1',
					pageSize: '10',
					column: "f72655cb-4cfd-11ec-9573-5254003b9aa7",
					label: '',
					text: ''
				},
				newLabel: [],
				dataList: [],
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
			}
		},
		created() {
			// 获取图片前缀
			this.webImgUrl = this.$webUrl
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			this.getNewLabel() //新闻标签
			this.NewsList(this.dataMain)
		},
		// onReachBottom() {
		// 	let _this = this
		// 	if (!_this.isLoadMore) { //此处判断，上锁，防止重复请求
		// 		_this.isLoadMore = true
		// 		setTimeout(function() {
		// 			_this.dataMain2.currentPage++
		// 			// this.getVideoList()
		// 			_this.upNewList(_this.dataMain2)
		// 		}, 1000)
		// 	}
		// },
		methods: {
			// 强制刷新、重新加载页面
			test() {
				this.$forceUpdate()
			},
			// 上拉新闻列表
			upNewList(newLabel) {
				this.$myResquest.getNewsList(newLabel).then(res => {
					if (res.data.code == 200) {
						if (res.data.data) {
							this.dataList = this.dataList.concat(res.data.data)
							if (res.data.data.length < this.dataMain2.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					}
				})
			},
			// 更多
			moreClick(data) {
				let _this = this
				data.currentPage++
				console.log(data.currentPage)
				console.log(_this.pageCount)
				// 最大页数小于当前页数相等时，请求
				if (data.currentPage <= _this.pageCount) {
					_this.newClickTitle = "点击查看更多数据"
					uni.showLoading({
						title: '加载中....'
					})
					setTimeout(function() {
						_this.$myResquest.getNewsList(data).then(res => {
							if (res.data.code == 200) {
								if (res.data.data.length == 0) {
									_this.meishuju = '暂无数据'
								}
								_this.dataList = _this.dataList.concat(res.data.data)
							}
						})
						uni.hideLoading()
					}, 1000)
				} else {
					_this.newClickTitle = "已加载全部数据"
				}
			},
			// 搜索
			NewsList(data) {
				let that = this
				that.dataList = []
				data.currentPage = 1
				that.newClickTitle = "点击查看更多数据"
				that.pageCount=''   //初始化总页数
				uni.showLoading({
					title: '数据加载中...'
				})
				setTimeout(function() {
					that.$myResquest.getNewsList(data).then((res) => {
						if (res.data.code == 200) {
							that.dataList = res.data.data
							that.pageCount = res.data.pageCount
							if (that.dataList.length == 0) {
								that.meishuju = '暂无数据信息'
							}
							uni.hideLoading()
						}
						uni.hideLoading()
					})
				}, 1000)
			},
			// 标签按钮搜索
			SearchNewsList(data, index) {
				let that = this
				that.dataList = []
				that.loadStatus = false
				that.newClickTitle = "点击查看更多数据"
				that.pageCount=''   //初始化总页数
				uni.showLoading({
					title: '数据加载中....'
				})
				that.arcConTxt = index
				setTimeout(function() {
					if (data == '全部') {
						that.dataMain2.label = ''
						that.dataMain2.currentPage = 1
						that.dataMain.currentPage = 1
						that.$myResquest.getNewsList(that.dataMain2).then(res => {
							if (res.data.code == 200) {
								if (res.data.data.length == 0) {
									that.meishuju = '暂无数据'
								}
								that.pageCount = res.data.pageCount
								that.dataList = that.dataList.concat(res.data.data)
							}
						})
						uni.hideLoading()
					} else {
						that.dataMain2.label = data
						that.dataMain2.currentPage = 1
						that.dataMain.currentPage = 1
						that.$myResquest.getNewsList(that.dataMain2).then((res) => {
							if (res.data.code == 200) {
								that.dataList = res.data.data
								if (that.dataList.length == 0) {
									that.meishuju = '暂无数据信息'
								}
								uni.hideLoading()
							}
							uni.hideLoading()
						})
					}
				}, 1000)

			},
			// 新闻标签、
			getNewLabel() {
				this.$myResquest.getNewsLabel().then(res => {
					if (res.data.code == 200) {
						this.newLabel = res.data.data
						this.newLabel.splice(0, 0, '全部')
					}
				})
			},
			// 详情
			actileMainDetail(index) {
				uni.navigateTo({
					url: "../../pageA/realTime/realTimeDetail?id=" + index
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		position: absolute;
		height: 100%;
		background: #f7f7f7;

		.realMain {
			width: 630rpx;
			margin: 0 auto;

			.realSearch {
				width: 100%;
				height: 62rpx;
				background: #ffffff;
				border-radius: 34rpx;
				box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.10);
				margin: 0 auto;

				input {
					padding: 0 36rpx;
					box-sizing: border-box;
				}

				.realSearchBth {
					width: 119rpx;
					height: 62rpx;
					background: #5cd1ce;
					border-radius: 34rpx;
					color: #F4F4F4;
				}
			}

			.actileJz {
				.List {
					display: flex;
					flex-wrap: wrap;
					width: 700rpx;
					margin: 0 auto;
					padding: 18rpx 0;
					box-sizing: border-box;
					border-bottom: 1rpx solid #e5e5e5;

					.actileJzList {
						display: flex;

						text {
							border: 1rpx solid #5cd1ce;
							border-radius: 18rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							color: #5cd1ce;
							line-height: 36rpx;
							padding: 5rpx 14rpx;
							box-sizing: content-box;
							display: block;
							margin: 10rpx;
							background: #ffffff;
						}
					}
				}

				.actile_main {
					    display: flex;
					    padding: 30rpx 0 0;
					    box-sizing: border-box;
					    margin: 0 auto;
					    border-bottom: 2rpx solid #e5e5e5;
					    justify-content: space-between;
					    width: 100%;
					&:first-child {
						border-top: 2rpx solid #e5e5e5;
					}

					.actile_main_left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 100%;
						margin-right: 10rpx;

						.actile_main_title {
							width: 100%;
							line-height: 47rpx;
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #333333;
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-line-clamp: 2;

							/*! autoprefixer: off */

							-webkit-box-orient: vertical;
						}

						.actile_main_bot {
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
							margin-bottom: 12rpx;
							    margin-top: 15rpx;

							.time {
								width: 138rpx;
								height: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								text-align: left;
							}

							.text {
								width: 28rpx;
								height: 36rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								text-align: left;
							}

							image {
								width: 32rpx;
								height: 18rpx;
								margin: 0 14rpx 0 24rpx;
							}
						}
					}

					.actile_main_right {
						image {
							width: 154rpx;
							height: 102rpx;
						}
					}
				}
			}
		}
	}

	.moreShuju {
		width: 603rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.uniLoading {
		width: 500rpx;
		height: 150rpx;
	}

	.arcConTxtClass {
		color: #ffffff !important;
		background: #5cd1ce !important;
	}
</style>
